<template>
  <div>
    <nav-bar>
      <template v-slot:center>
        <span style="font-size: 0.16rem; color: #fff">地址管理</span>
      </template>
    </nav-bar>
    <template v-if="!addressList.length">
      <div class="noAddress">
        <span>还没有地址信息,赶紧去添加把</span>
      </div>
      <van-button round block native-type="submit" class="btn" color="#42b983" @click="onAdd">添加收货地址</van-button>
    </template>
    <template v-else>
      <Scroll class="my-scroll" ref="myScroll">
        <van-address-list
          v-model="chosenAddressId"
          :list="addressList"
          :disabled-list="disabledList"
          disabled-text="以下地址超出配送范围"
          default-tag-text="默认"
          @add="onAdd"
          @edit="onEdit"
        />
      </Scroll>
      <div class="addAddress">
        <van-button round block native-type="submit" color="#42b983" @click="onAdd" class="btn-bottom"
          >新增地址</van-button
        >
      </div>
    </template>
  </div>
</template>

<script>
import { getAddressList } from 'network/address'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { Toast } from 'vant'
import Scroll from 'components/common/scroll/Scroll.vue'
export default {
  components: { Scroll },
  name: 'Address',
  setup() {
    // 生成路由实例
    const router = useRouter()

    // 默认选中第一个
    const chosenAddressId = ref('')
    // 地址列表
    const addressList = ref([])
    // 初始化获取地址列表
    const init = async () => {
      Toast.loading({
        message: '加载中...',
        forbidClick: true
      })
      const { data } = await getAddressList()
      chosenAddressId.value = data.find(item => item.is_default === 1) ? data.find(item => item.is_default === 1).id : 0
      // 统一格式
      data.forEach(item => {
        const addressItem = {}
        addressItem.id = item.id
        addressItem.name = item.name
        addressItem.tel = item.phone
        addressItem.address = `${item.province} ${item.city} ${item.county} ${item.address}`
        addressItem.isDefault = !!item.is_default
        addressList.value.push(addressItem)
        Toast.clear()
      })
    }
    init()
    const disabledList = [
      {
        id: '3',
        name: '王五',
        tel: '1320000000',
        address: '浙江省杭州市滨江区江南大道 15 号'
      }
    ]
    // 添加新地址
    const onAdd = () => {
      router.push({
        path: '/editaddress',
        query: {
          type: 'add'
        }
      })
    }
    // 修改地址
    const onEdit = address => {
      router.push({
        path: '/editaddress',
        query: {
          type: 'edit',
          addressId: address.id
        }
      })
    }

    return {
      addressList,
      onAdd,
      onEdit,
      disabledList,
      chosenAddressId
    }
  }
}
</script>

<style lang="scss" scoped>
.noAddress {
  height: 60vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.btn {
  width: 90vw;
  margin: 0 auto;
}
.my-scroll {
  height: calc(100vh - 0.44rem - 0.5rem);
}
.addAddress {
  position: fixed;
  z-index: 100;
  bottom: 0;
  background: #fff;
  left: 0;
  right: 0;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  .btn-bottom {
    width: 90vw;
  }
}
::v-deep(.van-address-list__bottom) {
  display: none;
}
::v-deep(.van-radio__icon) {
  display: none;
}
::v-deep(.van-radio__label) {
  margin: 0;
}
</style>